<template>
	<view class="loginsafe" v-if="onstatus">
		<view class="marign">

		</view>
		<view class="line-input">
			<view class="input-title">
				手机号
			</view>
			<input type="text" class="input" placeholder="输入手机号" v-model="telnumber"
				placeholder-class="placeholder-class">
		</view>
		<view class="line-input">
			<view class="input-title">
				<text class="cont">验证码</text>

			</view>
			<input type="text" class="input" placeholder="输入验证码" v-model="msgcode"
				placeholder-class="placeholder-class">
			<view class="lin">

			</view>
			<view class="butcode">
				<text>验证码</text>

			</view>
		</view>
		<view class="line-input">
			<view class="input-title">
				<text class="cont"> 新密码</text>

			</view>
			<input type="text" class="input" placeholder="设置新密码" v-model="newpassword"
				placeholder-class="placeholder-class">
		</view>
		<view class="line-input">
			<view class="input-title">
				<text class="cont"> 确认新密码</text>

			</view>
			<input type="text" class="input" placeholder="再次确认密码" v-model="enterpassword"
				placeholder-class="placeholder-class">
		</view>
		<view class="button">
			确认
		</view>
	</view>
	<view class="setsafeword" v-else>
		<view class="marign">

		</view>
		<text class="set-title">
			设置交易密码
		</text>
		<text class="set-text">输入交易密码</text>
	<u-code-input  dot></u-code-input>
		<view class="button1">
			完成
		</view>
	</view>
</template>

<script setup>
	
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const telnumber = ref('')
	const msgcode = ref('')
	const newpassword = ref('')
	const enterpassword = ref('')
	const onstatus = ref(false)
	onLoad(() => {
		console.log(222222);
	})
</script>

<style scoped lang="scss">
	.setsafeword {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.marign {
			width: 100%;
			height: 16rpx;
			background: rgba(247, 247, 252, 1);
		}

		.set-title {
			font-size: 24px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 33.6px;
			color: rgba(15, 24, 40, 1);
			margin-top: 180rpx;
		}

		.set-text {
			margin-top: 18rpx;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 18px;
			color: rgba(153, 153, 153, 1);
			margin-bottom: 78rpx;
		}
         ::v-deep.u-code-input__item{
			 margin-right: 18rpx !important; 
			width: 64rpx !important;
			height: 76rpx !important;
			opacity: 1;
			border-radius: 4px;
			
			border: 1px solid rgba(213, 217, 222, 1);
		 }
		.button1 {
			margin-top: 46rpx;
			width: 624rpx;
			height: 96rpx;
			opacity: 1;
			border-radius: 146rpx;
			background: rgba(71, 111, 254, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 23.17px;
			color: rgba(255, 255, 255, 1);
		}
		
	}

	.loginsafe {
		width: 100%;
		min-height: 100vh;

		.marign {
			width: 100%;
			height: 16rpx;
			background: rgba(247, 247, 252, 1);
		}
	}

	.button {
		position: fixed;
		bottom: 30%;
		left: 50%;
		transform: translateX(-50%);
		width: 624rpx;
		height: 96rpx;
		opacity: 1;
		border-radius: 146rpx;
		background: rgba(71, 111, 254, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0px;
		line-height: 23.17px;
		color: rgba(255, 255, 255, 1);
	}

	.x {
		opacity: 0.4;
	}

	.line-input {
		display: flex;
		align-items: center;
		background: #fff;
		display: flex;
		padding: 22rpx 32rpx;
		padding-bottom: 26rpx;
		box-sizing: content-box;
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		width: 100%;

		.input {
			width: 41%;
		}

		.lin {
			width: 2rpx;
			height: 24rpx;
			background-color: rgba(217, 217, 217, 1);

		}

		.butcode {
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 16.8px;
			color: rgba(71, 111, 254, 1);
			flex-grow: 1;
			text-align: center;
		}

		.placeholder-class {
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 22.4px;
			color: rgba(175, 175, 175, 1);
		}

		.input-title {
			width: 30%;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 22.4px;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			vertical-align: top;

			.cont {
				position: relative;
			}

			.cont::before {
				position: absolute;
				right: -20rpx;
				top: -10%;
				content: '*';
				color: red;

			}
		}
	}
</style>